<template>
  <div class="AnswerExam">
    <div class="popup">
      <div class="content animated pulse">
        <div class="closed" @click.stop="closed">
          <i class="iconfont icon-guanbi"></i>
        </div>
        <div class="title">
          <!--<img src="../../assets/img/AnswerExam/icon.svg" alt="">-->
          <img src="../../assets/img/AnswerExam/icon.png" alt="">
        </div>
        <div class="text-title">
          本章阅读完成
        </div>
        <div class="doc">
          <p>本章得{{obj.total_fraction}}分</p>
          <p>今日已读{{obj.word_number}}字</p>
        </div>
        <div class="btns">
          <btn :obj="btnstyles" :text="btntexts" v-on:statr="carry('Continue')"></btn>
          <btn :obj="btnstyle" :text="btntext" v-on:statr="carry('Punch')"></btn>
        </div>
        <div class="cal-time">无法获取成就卡？({{calTime}}s) 后自动跳转</div>
      </div>
    </div>
  </div>
</template>
<script>
  // import PopupsBg from '../PopupsBg/index'
  import btn from '../btn/index'

  export default {
    name: 'index',
    data: function () {
      return {
        btnstyle: {
          opacity: 1,
          height: '4rem',
          boxShadow: '0 5px 20px 0 rgba(255, 208, 0, 0.4)',
          backgroundColor: '#ffd000',
          color:'#66440a'
        },
        btnstyles: {
          opacity: 1,
          height: '4rem',
          border: '1px solid #c6c6cd',
          backgroundColor: '#fff',
          color: '#909099'
        },
        btntexts: '继续读',
        btntext: '完成',
        calTime:5
      }
    },
    props: ['obj'],
    mounted: function () {
      var interval = window.setInterval(()=>{
        this.calTime--
        if(this.calTime === 0){
          window.clearInterval(interval)
          this.carry('Punch')
        }
      },1000)
    },
    methods: {
      carry: function (str) {
        this.$emit(str)
      },
      closed: function () {
        this.$emit('closed')
      }
    },
    components: {btn}
  }
</script>

<style scoped>
  @import "../../assets/css/components/AnswerExam/index.css";
</style>
